//轮播图的功能
//功能1：根据轮播图的li渲染小圆圈
//功能2：轮播图的自动播放，小圆圈的高亮显示
//功能3：鼠标移动进去的时候，停止定时器
//功能4：鼠标移开focus-box，重启定时器
//功能5：点击右箭头，轮播图index +1
//功能6：点击左箭头，轮播图index -1
//功能7：小圆圈的跟随作用
// 7-01: 自动播放的时候，需要显示小圆圈 封装了一个函数（小圆圈高亮函数）
// 7-02: 左右箭头点击的时候，也调用（小圆圈高亮函数）
// 7-03：点击小圆圈，实现根据小li显示

let focus_box = document.querySelector(".focus-box") //轮播图
let focus = document.querySelector(".focus-box .focus") //轮播图
let lis = focus.querySelectorAll("li") //轮播图的小li
let circle = document.querySelector(".focus-box .circle") //小圆圈
let arrow = document.querySelector(".focus-box .arrow") //左右箭头的父盒子
let arrowL = arrow.querySelector(".arrowL") //左箭头按钮
let arrowR = arrow.querySelector(".arrowR") //右箭头按钮

//功能1：根据轮播图的li渲染小圆圈 
//1-01：遍历lis，给小圆圈添加li
//1-02：当为第一个的时候添加active
//1-03：先获取到小圆圈的长度（也就是最初的小focus中的小li），先渲染了，不然后面克隆了元素，影响
let circleLen = focus.querySelectorAll("li")

renderCircle(circle, circleLen)

let circleArr = document.querySelector(".circle") //重新获取到小圆圈的
let circleList = circleArr.querySelectorAll("li") //重新获取待小圆圈的小li



//功能2：轮播图的自动播放  
//2-00: 需要定时器 来实现自动播放
//2-01：就是focus_box这个盒子（li的父元素的父元素）向左移动，盒子的宽度
//2-02：当focus移动到最后一张的时候，需要快速跳转到第一张  move(ele, obj, callback)
//2-03: 实现无缝的播放，需要克隆第一张在放置在最后一个
//    当执行到最后一张的时候，立马把left设置为0,设置为0的时候，也就是代表index为0了
//2-04: 把自动播放封装为一个函数 autoplay() 
//注意点1：就是这边的index和timer为全局变量，timer为了清除定时器！
//注意点2：开启轮播图的index是那个停止了，在那边开启，于是index为全局变量
let firstLi = focus.children[0].cloneNode(true) //复制第一个节点
focus.appendChild(firstLi) //放置在最后一个 添加完之后，需要在重新获取lis的长度，为了重新渲染
lis = focus.querySelectorAll("li") //再一次获取长度为7

let focusW = focus_box.offsetWidth //轮播图移动的宽度
let index = 0; //起始的索引
let timer
let flag = true; //节流阀，用于截流左右按钮点击事件
autoplay() //调用自动播放轮播图！

//功能3：鼠标移动进去的时候，停止定时器
focus_box.onmouseover = function () {
  clearInterval(timer)
}
//功能4：鼠标离开的时候，开启定时器
//注意点：开启轮播图的index是那个停止了，在那边开启，于是index为全局变量
focus_box.onmouseout = function () {
  autoplay()
}
// 功能5：点击右箭头，轮播图index +1
//5-01：如果flag为true 点击右箭头，立即把flag设置为false，并且index++  节流阀的作用：为了防止连续点击的问题（最初为flag为真)
//5-02：index++后，要调用动画，在动画执行完毕后，把节流阀设置为true，
// 防止点击（在回调函数中设置，回调函数已经代表动画执行完毕了）
arrowR.onclick = function () {
  if (flag) {
    flag = false;
    index++;
    CircleLight()
    animation(focus, {
      left: (-focusW) * index
    }, function () {
      flag = true
      //当执行到最后一张的时候，立马把left设置为0,设置为0的时候，也就是代表index为0了
      if (index === lis.length - 1) {
        index = 0;
        focus.style.left = 0 + "px"
      }
    })
  }
}

let lastLi = focus.children[focus.children.length - 2].cloneNode(true)
// console.log(focus.children[0]); //第一个孩子前面
focus.insertBefore(lastLi, focus.children[0])

// 功能6：点击左箭头，轮播图index -1
//5-00：克隆最后一张(不算上之前克隆的第一张图），也就是focus的最后一个孩子（focus.children.length - 2） 在前面添加！
//5-01：如果flag为true 点击左箭头，立即把flag设置为false，并且index--  
//5-02：index--后，要调用动画，在动画执行完毕后，把节流阀设置为true，
// 防止点击（在回调函数中设置，回调函数已经代表动画执行完毕了）
// console.log(index); //0
arrowL.onclick = function () {
  if (flag) {
    flag = false
    index--;
    if (index <= 1) { //假如走到1的时候，那么需要把index设置为1
      index = 1
    }
    // console.log(index)
    for (var i = 0; i < circleList.length; i++) {
      circleList[i].className = ""
    }
    circleList[index - 1].className = "active"

    animation(focus, {
      left: (-focusW) * index
    }, function () {
      flag = true
      //当执行到第一张的时候，也就是0的时候
      // 也就是代表index为0了，强行设置index为lis.length - 1（为克隆的最后一张），
      // 立马把left设置为最后的宽3500px（也就是index * (-focusW) 
      // console.log(lis.length - 1);
      if (index === 1) {
        index = circleList.length
        focus.style.left = index * (-focusW) + "px"
      }
    })

  }
}

//功能7：点击小圆圈，显示对应的li
circleList.forEach((items, i) => {
  items.onclick = function () {
    // console.log(i); // 0 - 5 的索引号
    //点击那个小圆圈的li就显示高亮

    //排他思想  遍历focus中的lis，然后根据index紧随着显示高亮
    circleList.forEach((items, i) => {
      circleList[i].className = ""
    })
    circleList[i].className = "active"

    index = i + 1 //上面focus中的li的显示 
    animation(focus, {
      left: (-focusW) * index
    }, function () {
      //当执行到最后一张的时候，立马把left设置为0,设置为0的时候，也就是代表index为0了
      if (index === lis.length - 1) {
        index = 0;
        focus.style.left = 0 + "px"
      }
    })
  }

})

//自动轮播图函数
function autoplay() {
  timer = setInterval(() => {
    index++;
    //小圆圈的高亮函数
    CircleLight()
    animation(focus, {
      left: (-focusW) * index
    }, function () {
      //当执行到最后一张的时候，立马把left设置为0,设置为0的时候，也就是代表index为0了
      if (index === lis.length - 1) {
        index = 0;
        focus.style.left = 0 + "px"
      }
    })
  }, 1000)
}


//渲染小圆圈的函数
function renderCircle(ele, arr) {
  //1-01：遍历lis，给小圆圈添加li
  //1-02：当为第一个的时候添加active
  arr.forEach((items, i) => {
    if (i === 0) {
      ele.innerHTML = ` <li class="active">${i + 1}</li> `
      return
    }
    ele.innerHTML += ` <li>${i+1}</li> `
  })
}
// //小圆圈的高亮显示函数
function CircleLight() {
  //排他思想  遍历focus中的lis，然后根据index紧随着显示高亮
  circleList.forEach((items, i) => {
    circleList[i].className = ""
  })
  circleList[index - 1].className = "active"
}